<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>{{ movie_info.name }}</title>
    {% load static %}
    <link rel="shortcut icon" href="{% static '/images/bitbug_favicon.ico' %}">
	<link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
	<link rel="stylesheet" href="{% static 'css/reset.css' %}" type="text/css">
	<link rel="stylesheet" href="{% static 'lib/bootstrap/css/bootstrap.min.css' %}" type="text/css">
	<link rel="stylesheet" href="{% static 'lib/font-awesome-4.7.0/css/font-awesome.min.css' %}" type="text/css">
	<script src="{% static 'lib/jquery/jquery-3.4.1.min.js' %}" type="text/javascript"></script>
	<script src="{% static 'lib/bootstrap/js/bootstrap.min.js' %}" type="text/javascript"></script>
	<script src="{% static 'js/moviePlay.js' %}" type="text/javascript"></script>
    <script src="{% static 'lib/jquery/jquery.raty.min.js' %}" type="text/javascript"></script>
	<link rel="stylesheet" href="{% static 'css/playMovie_style.css' %}" type="text/css">
</head>
<body>
	<!-- 头部 -->
	<section class="head_top">
		<header class="container">
			<div class="col-md-4">
				<span><a href="{% url 'index' %}">首&nbsp;&nbsp;页</a></span>
				<span><a href="{% url 'users:user_info' %}">个人中心</a></span>
			</div>
			<div class="col-md-8">
				<input type="text"><button>搜索</button>			
			</div>
		</header>
	</section>
	<!-- 视频播放 -->
	<section class="playMovie container">
		<figure>
			<figcaption>
				<span><a href="{% url 'index' %}">电影之家</a></span>
				<span>></span>
				<span>{{ movie_info.name }}</span>
			</figcaption>
			<div class="player" style="">
{#				<video src="{% static '/images/chrome.mp4' %}"></video>#}
                <video src="#"></video>
				<div class="controls">
					<!-- 播放和暂停按钮 -->
					<a href="javascript:;" class="switch fa fa-play"></a>
					<!-- 播放进度 -->
					<div class="progress">
						<div class="spanne"></div>
						<div class="bar"></div>
					</div>
					<!-- 播放时间/播放总时长 -->
					<div class="timer">
						<span class="current">00:00:00</span>/
						<span class="total">00:00:00</span>
					</div>
					<!-- 全屏/取消全屏 -->
					<a href="javascript:;" class="expand fa fa-arrows-alt"></a>
				</div>
			</div>
		</figure>
	</section>
		
	<!-- 视频简介 -->
	<section class="videoIntroduction container">
		<div class="cover">
			<img src="{{ MEDIA_URL }}{{ movie_info.image }}">
            <!-- 评分 -->
            <div class="grade" >

            </div>
		</div>
		<div class="introdece">
			<span>名称: {{ movie_info.name }}</span>
			<span>收藏:<div class="btn btn-default" id="jsCollectionBtn">{{ is_fav }}</div></span>
			<span>类型: {{ movie_info.movie_type }}</span>
			<span>主演: {{ movie_info.protagonist }}</span>
			<span>上映时间: {{ movie_info.release_data }}</span>
			<span>地区/国家: {{ movie_info.region }}</span>
			<span>简介: {{ movie_info.intro }}</span>
		</div>
	</section>
	<!-- 评论和排行 -->
	<section class="commentsCentent container">
		<!-- 评论 -->
		<div class="comments">
			<div class="submitComments">
				<img src="{% if request.user.is_authenticated %}{{ MEDIA_URL }}{{ request.user.image }}{% else %}{% static '/images/admin.jpg' %}{% endif %}">
				<textarea placeholder="请输入文字..." id="jsCommentContent"></textarea>
				<button id="jsCommentBtn">提交评论</button>
			</div>
			<div class="ToViewComments">
				<h2>全部评论</h2>
                {% for comments in comments_page %}
				<div class="definiteComments">
					<img src="{{ MEDIA_URL }}{{ comments.user.image }}" alt="">
					<span>{{ comments.user.nick_name }}</span>
					<span class="timerComments">{{ comments.add_time }}</span>
					<div>{{ comments.comment }}</div>
				</div>
                {% endfor %}
			</div>
			<div class="commentsBottom">
                {% if comments_page.has_previous %}
						<li class="long"><a href="?{{ comments_page.previous_page_number.querystring }}">上一页</a></li>
                        {% endif %}

                        {% for page in comments_page.pages %}
                            {% if page %}
                                {% ifequal page comments_page.number %}
                                    <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                {% else %}
                                    <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                {% endifequal %}
                            {% else %}
                                    <li class="none">
                                        <a href="">...</a>
                                    </li>
                                {% endif %}
                        {% endfor %}

                        {% if comments_page.has_next %}
						    <li class="long"><a href="?{{ comments_page.next_page_number.querystring }}">下一页</a></li>
                        {% endif %}
            </div>
		</div>
		
		<!-- 排行榜 -->
		<div class="rankingList visible-lg-block">
			<div>
				<span><i class="fa fa-trophy" aria-hidden="true"></i></span>
				<span>热门排行</span>
			</div>
            {% for fav in fav_movie %}
			<div><span>{{ forloop.counter }}</span><a href="{% url 'movieinfo:movie_detail' fav.id%}">{{ fav.name }}</a></div>
			{% endfor %}
		</div>
	</section>
	<!-- 底部 -->
	<section class="bottom">

	</section>
</body>
{% block custom_js %}
<script type="text/javascript">
    //用户收藏
    $('#jsCollectionBtn').on('click',function(){
        add_fav($(this),{{ movie_info.id }});
    });
    //增加评论
    $('#jsCommentBtn').on('click',function(){
        add_comment($(this),{{ movie_info.id }});
    });

    //评级
    grade();
    function grade(){
        var result;
        $('.grade').raty({
            number: 5,
            path: '{% static "/images/grade" %}',
            hints: ['不喜欢','不喜欢','一般','喜欢','推荐'],
            starHalf: 'star-half-big.png',
            half:true,
            round:{down:.26,full:.7,up:.9},
            score: function(){
                return {{ ratings }};
            },
            click:function(score, evt){
                grade_ajax(score);
            }
        });
    }

    function grade_ajax(data){
        $.ajax({
            cache: false,
            type: 'POST',
            url: '{% url "movieinfo:add_grade" %}',
            data: {'add_grade': data ,'movie_id': {{ movie_info.id }}},
            async: true,
            beforeSend: function(xhr, setting){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function(data){
                 if(data.status == 'fail'){
                    if(data.msg == '用户未登录'){
                        alert('用户未登录');
                        window.location.href='/';
                    }else{
                        alert(data.msg);
                    }
                }else if(data.status == 'success'){
                    alert('评级成功!');
                }
            }
        });
    }

    function add_fav(fav_elem, fav_id){
        $.ajax({
            cache: false,
            type: 'POST',
            url: "{% url 'movie:add_fav' %}",
            data: {'fav_id': fav_id},
            async: true,
            beforeSend: function(xhr, setting){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function(data){
                if(data.status == 'fail'){
                    if(data.msg == '用户未登录'){
                        alert('用户未登录');
                        window.location.href='/';
                    }else{
                        alert(data.msg);
                    }
                }else if(data.status == 'success'){
                    fav_elem.text(data.msg);
                }
            },
        });
    }

    function add_comment(comment_elem, movie_id){
        var comments=$('#jsCommentContent').val();
        if(comments == ''){
            alert('评论不能为空!');
            return;
        }
        $.ajax({
            cache: false,
            type: 'POST',
            url: '{% url "movie:add_comment" %}',
            data: {'movie_id': movie_id, 'comments': comments},
            async: true,
            beforeSend: function(xhr, setting){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success:function(data){
                if(data.status == 'fail'){
                    if(data.msg == '用户未登录'){
                        alert('用户未登录!');
                        window.location.href='/';
                    }else{
                        alert('评论失败,请重新操作!');
                    }
                }else if(data.status == 'success'){
                    $('#jsCommentContent').attr({disable:'disable'});
                    var t1=setTimeout(function(){
                       $('#jsCommentContent').removeAttr('disabled');
                       window.location.reload(); //刷新页面
                        clearTimeout(t1);
                    },1000);

                    {#$('.ToViewComments').children('h2').after($('<div class="definiteComments">' +#}
                    {#    '<img src="+data.movie_comments.user.image+" alt="">' +#}
                    {#    '<span>data.movie_comments.user.nick_name</span>' +#}
                    {#    '<span class="timerComments">data.movie_comments.add_time</span>' +#}
                    {#    '<div>data.movie_comments.comment</div>' +#}
                    {#    '</div>'));#}
                    {#console.log('hhhh')#}
                    {#console.log(data.movie_comments.user.nick_name)#}
                }

            }
        });
    }
</script>
{% endblock %}
</html>